<template>
    <div class="w-h-full">
        <!-- 盒子标题 -->
        <template v-if="title">
            <div class="flex-between-items-box">
                <div :class="['card-title flex-shrink-0', { 'pl-24': isLeft }]">{{ title }}</div>
                <!-- 标题右侧自定义内容 -->
                <slot name="title"/>
            </div>
        </template>
        <!-- echarts 盒子 - 自定义内容 -->
        <template v-if="custom">
            <slot/>
        </template>
        <!-- echarts 盒子 -->
        <template v-else>
            <div :id="id" :ref="id" class="w-h-full"/>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import * as echarts from 'echarts'
import { EChartsType } from 'echarts'
import mapData from '@/assets/json/CHAIN.json'

const props = withDefaults(defineProps<{
    // 是否使用自定义内容
    custom: boolean
    // 图表 id
    id?: string
    // 图表的配置项和数据
    options?: Record<string, any>
    // 标题
    title: string
    // 标题是否需要左边距
    isLeft: boolean
}>(), {
    custom: false,
    title: '',
    isLeft: false
})

// ECharts 图表
const chart = ref<EChartsType | null>(null)

/**
 * 初始化 echarts
 * */
const initChart = (options: Record<string, any>) => {
    // 如果是地图需要先注册地图
    if (props.id === 'mapECharts') echarts.registerMap('china', <any>mapData)
    // 获取 DOM 节点
    const EChartsBox = <HTMLDivElement>document.querySelector(`#${props.id}`)
    // 基于 DOM 初始化 echarts 实例
    chart.value = echarts.init(EChartsBox)
    // 根据配置项和数据渲染图表
    chart.value.setOption(options)
    // 根据浏览器改变尺寸
    window.onresize = () => chart.value!.resize()
}

watch(() => props.options, newVal => initChart(newVal!))
</script>
